<template>
    <div class="app-container dialog">
        <div class="title">域名备案</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input readonly style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <div class="Subhead">需求信息</div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="应用系统" prop="app_system">
                        <el-select
                            disabled
                            clearable
                            filterable
                            v-model="form.app_system"
                        >
                            <el-option
                                v-for="item in xtList"
                                :key="item.id"
                                :label="item.projectname"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="BGP地址" prop="BGP_location">
                        <el-input readonly v-model="form.BGP_location"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio disabled label="true">是</el-radio>
                            <el-radio disabled label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            disabled
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="deptChange"
                            v-model="officeId"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核人员"
                        prop="Auditunit"
                    >
                        <el-select
                                disabled
                                clearable
                                style="width: 200px"
                                v-model="form.audit_person"
                                :placeholder="
                                    form.officeId
                                        ? '请选择审核人员'
                                        : '请先选择审核部门'
                                "
                            >
                                <el-option
                                    v-for="item in users"
                                    :key="item.userName"
                                    :label="item.nickName"
                                    :value="item.userName"
                                >
                                </el-option>
                            </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="mintitle">
                主办方
            </div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="主办者单位" prop="sponsor_unit">
                        <el-input readonly v-model="form.sponsor_unit"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="主办者证件号" prop="sponsor_id">
                        <el-input readonly v-model="form.sponsor_id"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="备案号" prop="record_number">
                        <el-input readonly v-model="form.record_number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="备案号密码" prop="record_number_password">
                        <el-input readonly v-model="form.record_number_password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="mintitle">
                法人
            </div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="法人姓名" prop="legal_person_name">
                        <el-input readonly v-model="form.legal_person_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="法人身份证号" prop="legal_person_id">
                        <el-input readonly v-model="form.legal_person_id"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="法人座机" prop="legal_person_landline">
                        <el-input readonly v-model="form.legal_person_landline"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="法人手机" prop="legal_person_phone">
                        <el-input readonly v-model="form.legal_person_phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="法人邮箱" prop="legal_person_mailbox">
                        <el-input readonly v-model="form.legal_person_mailbox"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="mintitle">
                网站负责人
            </div>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="负责人姓名" prop="principal_name">
                        <el-input readonly v-model="form.principal_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="负责人身份证号" prop="principal_id">
                        <el-input readonly v-model="form.principal_id"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="负责人座机" prop="principal_landline">
                        <el-input readonly v-model="form.principal_landline"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="负责人手机" prop="principal_phone">
                        <el-input readonly v-model="form.principal_phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="负责人邮箱" prop="principal_mailbox">
                        <el-input readonly v-model="form.principal_mailbox"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注内容">
                <editor
                :readonly="true"
                    v-model="form.remarks"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                        
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
        </el-form>
        <div class="Subhead">
            附件
        </div>
        <div class="Sponsor">
            主办者证件  <span>  (必填)</span> 
            <el-upload
                v-if="false"
                style="display: inline-block"
                class="upload-demo"
                accept
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="SponsorfileList"
                action=""
                :on-remove="SponsorhandleChange"
                :on-change="SponsorhandleChange"
                :auto-upload="false"
            >
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </el-upload>
            <span class="mintitles">
                最大1M/个
            </span>
        </div>
        <el-table :data="SponsorfileList">
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.fileName
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.fileExt
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                v-if="false"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      v-show="scope.row.fileExt == 'jpeg' ||
                                  scope.row.fileExt == 'jpg' ||
                                  scope.row.fileExt == 'png' ||
                                  scope.row.fileExt == 'pdf' ||
                                  scope.row.fileExt == 'gif'"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="SponsorDeleteFile(scope.row.id)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="Sponsor" style="margin-top:30px">
            法人身份证  <span>  (必填)</span> 
            <el-upload
                style="display: inline-block"
                class="upload-demo"
                accept
                v-if="false"
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="legalPersonfileList"
                action=""
                :on-remove="legalPersonhandleChange"
                :on-change="legalPersonhandleChange"
                :auto-upload="false"
            >
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </el-upload>
            <span class="mintitles">
                最大1M/个
            </span>
        </div>
        <el-table :data="legalPersonfileList">
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.fileName
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.fileExt
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                v-if="false"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      v-show="scope.row.fileExt == 'jpeg' ||
                                  scope.row.fileExt == 'jpg' ||
                                  scope.row.fileExt == 'png' ||
                                  scope.row.fileExt == 'pdf' ||
                                  scope.row.fileExt == 'gif'"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="legalPersonDeleteFile(scope.row.id)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="Sponsor" style="margin-top:30px">
            	负责人身份证  <span>  (必填)</span> 
            <el-upload
                style="display: inline-block"
                class="upload-demo"
                accept
                v-if="false"
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="personfileList"
                action=""
                :on-remove="personhandleChange"
                :on-change="personhandleChange"
                :auto-upload="false"
            >
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </el-upload>
            <span class="mintitles">
                最大1M/个
            </span>
        </div>
        <el-table :data="personfileList">
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.fileName
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.fileExt
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="100"
                v-if="false"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      v-show="scope.row.fileExt == 'jpeg' ||
                                  scope.row.fileExt == 'jpg' ||
                                  scope.row.fileExt == 'png' ||
                                  scope.row.fileExt == 'pdf' ||
                                  scope.row.fileExt == 'gif'"
                      @click="previewFile(scope.row)"
                      >预览
                  </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="personDeleteFile(scope.row.id)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { uploadFile } from "@/api/system/upload.js";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js"
import { Getformdata,taskComplete } from "@/api/todoItem/todo.js";
import {
    DelectUploadFile
  } from "@/api/cloud/cloud";
export default {
    name: "DomainNameFilingsDonedetails",
    components: {
        Editor,
    },
    data() {
        return {
          dialogVisible:false,
          dialogImageUrl:'',
          base_url: process.env.VUE_APP_BASE_API,
            loading:false,
            taskName:'',
            title:'',
            taskId:'',
            definitionName:'',
            btnLoading:true,
            form: {
                unit_audit:'false',
                audit_unit:null,
                audit_person:null,
            },
            //部门列表树结构
            dept: [],
            //上云系统列表
            xtList: [],
            // 部门id
            officeId:'',
            // 关机时间下拉数组
            ShutDownList: [
                {
                    id: "上班时间",
                    name: "上班时间",
                },
                {
                    id: "非上班时间",
                    name: "非上班时间",
                },
                {
                    id: "不能关闭",
                    name: "不能关闭",
                },
                {
                    id: "其他时间",
                    name: "其他时间",
                },
            ],
            // 系统状态
            SystemStateList: [
                {
                    id: "从系统选择",
                    name: "从系统选择",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            // 操作系统下拉数据
            operatingSystemList: [
                {
                    id: "Linux",
                    name: "Linux",
                },
                {
                    id: "Windows",
                    name: "Windows",
                },
            ],
            // 网络环境下拉数据
            networkList: [
                {
                    id: "政务外网",
                    name: "政务外网",
                },
                {
                    id: "互联网",
                    name: "互联网",
                },
            ],
            // 交互类型
            ExchangeType:[
                {
                    id:'资源池内交互',
                    name:'资源池内交互'
                },
                {
                    id:'跨网交互',
                    name:'跨网交互'
                },
                {
                    id:'其他交互',
                    name:'其他交互'
                },
            ],
            // 交互方式
            InteractionModeList:[
                {
                   id:'协议交互',
                   name:'协议交互' 
                },
                {
                   id:'文件交互',
                   name:'文件交互' 
                },
                {
                   id:'数据库交互',
                   name:'数据库交互' 
                }
            ],
            // 协议下拉数据
            agreementList:[
                {
                    id:'http',
                    name:'http'
                },
                {
                    id:'https',
                    name:'https'
                },
                {
                    id:'ftp',
                    name:'ftp'
                },
                {
                    id:'snmp',
                    name:'snmp'
                },
                {
                    id:'其他',
                    name:'其他'
                }
            ],
            // 交互时间
            InteractionTimeList:[
                {
                    id:'每月',
                    name:"每月"
                },
                {
                    id:'每周',
                    name:"每周"
                },
                {
                    id:'每天',
                    name:"每天"
                },
                {
                    id:'实时',
                    name:"实时"
                },
                {
                    id:'不定期',
                    name:"不定期"
                },
                {
                    id:'其他',
                    name:"其他"
                }
            ],
            rules: {},
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "互联网IP",
                    slot: "InternetIP",
                },
                {
                    title: "互联网端口",
                    slot: "InternetPort",
                },
                {
                    title: "政务外网IP",
                    slot: "extranetIP",
                },
                {
                    title: "政务外网端口",
                    slot: "extranetPort",
                },
                {
                    title: "协议",
                    slot: "agreement",
                },
                {
                    title: "交互时间",
                    slot: "InteractionTime",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem:'',
            editIpType:'',
            editPortManage:'',
            editport:'',
            editportType:'',
            editremarks:'',
            IsUnitAudit:false,
            // 用户数据
            users:[],
            // 主办者证件
            SponsorfileList:[],
            // 法人
            legalPersonfileList:[],
            // 负责人
            personfileList:[]
        };
    },
    created() {
        this.Getdata();
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        },
        routerUrl(){
            return this.$route.path
        }
    },
    watch: {
        visitedViews(value) {
            if(value){
                if(this.$options.name == 'DomainNameFilingsDonedetails'){
                    return
                }
                this.$destroy(this.$options.name)
            }
        },
        routerUrl(value){
            if(value == '/businessassistance/DomainNameFilings/Donedetails'){
                this.Getdata()
            }
        }
    },
    methods: {
        Getdata(){
            this.GetListSelect()
            var list = JSON.parse(sessionStorage.getItem('DomainNameFilingsDonedetails'));
            this.btnLoading = false
            Getformdata(list.processInstanceId).then(res=>{
                this.form = res.data
                this.SponsorfileList = []
                this.legalPersonfileList = []
                this.personfileList = []
                res.data.files.forEach(item=>{
                    if(item.fileType == 'sponsor'){
                        this.SponsorfileList.push(item)
                    }else if(item.fileType == 'legalPerson'){
                        this.legalPersonfileList.push(item)
                    }else if(item.fileType == 'principal'){
                        this.personfileList.push(item)
                    }
                })
                if(this.form.unit_audit == 'true'){
                    this.IsUnitAudit = true
                    this.officeId = Number(this.form.audit_unit)
                    this.deptChange([this.form.audit_unit])
                }
            })
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.form.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        deptChange(e) {
            this.users = [];
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
                this.getName(this.dept, this.form.audit_unit);
                listUser2({
                    deptId: this.form.audit_unit,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        UnitAuditChange(e) {
            if(e == 'true'){
                this.IsUnitAudit = true
            }else{
                this.IsUnitAudit = false
                this.form.audit_unit = null
                this.form.audit_person = null
                this.officeId = null
            }
        },
        GetListSelect() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            AllcloudUpList().then((response) => {
                this.xtList = response.rows;
            });
        },
        SponsorhandleChange(row,fileList) {
            this.SponsorfileList = fileList;
        },
        previewFile(item){
          this.dialogImageUrl = this.base_url + item.filePath;
           this.dialogVisible = true;
        },
        SponsorDeleteFile(id) {
            DelectUploadFile(id).then(res => {
                if (res.code == 200) {
                    this.form.files = this.form.files.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.SponsorfileList = this.SponsorfileList.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.$message({
                    message: '删除成功',
                    type: 'success'
                    });
                }
            })
        },
        legalPersonhandleChange(row,fileList) {
            this.legalPersonfileList = fileList;
        },
        legalPersonDeleteFile(id) {
            DelectUploadFile(id).then(res => {
                if (res.code == 200) {
                    this.form.files = this.form.files.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.legalPersonfileList = this.legalPersonfileList.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.$message({
                    message: '删除成功',
                    type: 'success'
                    });
                }
            })
        },
        personhandleChange(row,fileList) {
            this.personfileList = fileList;
        },
        personDeleteFile(id) {
            DelectUploadFile(id).then(res => {
                if (res.code == 200) {
                    this.form.files = this.form.files.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.personfileList = this.personfileList.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.$message({
                    message: '删除成功',
                    type: 'success'
                    });
                }
            })
        },
        sumit(){
            if(this.SponsorfileList.length <= 0){
                this.$message({
                    message: '请上传主办者证件',
                    type: 'warning'
                })
                return
            }
            if(this.legalPersonfileList.length <= 0){
                this.$message({
                    message: '请上传法人身份证',
                    type: 'warning'
                })
                return
            }
            if(this.personfileList.length <= 0){
                this.$message({
                    message: '请上传负责人身份证',
                    type: 'warning'
                })
                return
            }
            var SponsorfileList = []
            var legalPersonfileList = []
            var personfileList = []
            let Files1 = new FormData()
            Files1.append("key", "file");
            Files1.append("fileType", "sponsor");
            this.SponsorfileList.forEach((item) => {
                if(item.raw){
                    Files1.append("file", item.raw);
                }
            });
            let Files2 = new FormData()
            Files2.append("key", "file");
            Files2.append("fileType", "legalPerson");
            this.legalPersonfileList.forEach((item) => {
                if(item.raw){
                    Files2.append("file", item.raw);
                }
            });
            let Files3 = new FormData()
            Files3.append("key", "file");
            Files3.append("fileType", "principal");
            this.personfileList.forEach((item) => {
                if(item.raw){
                    Files3.append("file", item.raw);
                }
            });
            uploadFile(Files1).then(res1=>{
                SponsorfileList = res1.data
                uploadFile(Files2).then(res2=>{
                    legalPersonfileList = res2.data
                    uploadFile(Files3).then(res3=>{
                        personfileList = res3.data
                        // this.files.sponsor
                        let obj = {
                            formData: this.form,
                            formDefKey:'domainNameFiling',
                            title:this.form.title,
                            files:SponsorfileList.concat(legalPersonfileList).concat(personfileList)
                        }
                        definition(obj).then(res=>{
                            if(res.code == 200){
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                })
                                this.form = {}
                                this.SponsorfileList = []
                                this.legalPersonfileList = []
                                this.personfileList = []
                                Files1 = null
                                Files2 = null
                                Files3 = null
                                SponsorfileList = null
                                legalPersonfileList = null
                                personfileList = null
                                this.form.audit_unit = null
                                this.form.audit_person = null
                            }
                        })
                    })
                    .catch(()=>{
                        this.$message({
                            message: res3.msg,
                            type: 'error'
                        })
                        SponsorfileList = null
                        legalPersonfileList = null
                        personfileList = null
                        this.SponsorfileList = null
                        this.legalPersonfileList = null
                        this.personfileList = null
                        Files1 = null
                        Files2 = null
                        Files3 = null
                    })
                }).catch(()=>{
                    this.$message({
                        message: res2.msg,
                        type: 'error'
                    })
                    SponsorfileList = null
                    legalPersonfileList = null
                    personfileList = null
                    this.SponsorfileList = null
                    this.legalPersonfileList = null
                    this.personfileList = null
                    Files1 = null
                    Files2 = null
                    Files3 = null
                })
            }).catch(()=>{
                this.$message({
                    message: res1.msg,
                    type: 'error'
                })
                this.SponsorfileList = null
                this.legalPersonfileList = null
                this.personfileList = null
                SponsorfileList = null
                legalPersonfileList = null
                personfileList = null
                Files1 = null
                Files2 = null
                Files3 = null
            })

        },
        changeExamineShow(num,leble){
            this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            inputValue:num == 1 ? '通过': '不通过',
            }).then((resp) => {
                taskComplete({
                    taskId: this.taskId,
                    actionName: num == 1 ? '通过': '不通过',
                    action: num == 1 ? 'COMPLETE': 'BACK',
                    formData: this.form,
                    formDefKey:this.form.formDefKey,
                    files:this.form.files,
                    comment:resp.value
                }).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: res.msg
                        }); 
                        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                        this.$destroy(this.$options.name)
                        this.$router.push('/todoItem/todo')
                    }
                }).catch(err=>{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        }
    },
};
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .Sponsor{
        margin-left: 30px;

        span{
            color: red;
        }
        .mintitles{
            font-size: 8px;
            color: #ccc;
        }
    }
    .tabletitle {
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248, 248, 249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
    .mintitle{
        font-size: 14px;
        font-weight: bold;
        margin-left: 20px;
        border-bottom: 2px solid #000;
        margin-bottom: 6px;
    }
}
</style>